<template>
  <div>
    <vHeader></vHeader>

    <section id="home" class="main-single-post parallax-section">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">

          <div class="col-md-12 col-sm-12">
            <h1>Single Post</h1>
          </div>

        </div>
      </div>
    </section>

    <section id="blog-single-post">
      <div class="container">
        <div class="row">

          <div class="col-md-offset-1 col-md-10 col-sm-12">
            <div class="blog-single-post-thumb">

              <div class="blog-post-title">
                <h2>We Help You Create Perfect Modern Design</h2>
              </div>

              <div class="blog-post-format">
                <span>
                  <a href="#"><img src="@/assets/images/author-image1.jpg" class="img-responsive img-circle"> Jen Lopez</a>
                </span>
                <span>
                  <i class="fa fa-date"></i> July 22, 2017</span>
                <span>
                  <a href="#">
                    <i class="fa fa-comment-o"></i> 124 Comments</a>
                </span>
              </div>

              <div class="blog-post-des">
                <p>Vivamus euismod tempor interdum. Vivamus non scelerisque ex, et interdum leo. In bibendum lacus vitae felis egestas, at consectetur metus facilisis. Morbi tellus dolor, porta dignissim enim sit amet, dapibus sagittis erat. In blandit elit sit amet dui aliquet congue nec vel quam. Integer id tristique libero.</p>
                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </blockquote>
                <p>Integer vestibulum vitae arcu vel consectetur. Morbi nisl enim, elementum eget enim nec, posuere commodo mi. Proin elementum metus et dolor posuere placerat. Proin in sagittis justo. Nulla tincidunt eu velit elementum accumsan.</p>

                <div class="blog-post-image">
                  <img src="@/assets/images/blog-image3.jpg" class="img-responsive" alt="Blog Image 3">
                </div>

                <h3>What is Personal Blog Theme?</h3>
                <p>Nulla tincidunt eu velit elementum accumsan. Vivamus euismod tempor interdum. Vivamus non scelerisque ex, et interdum leo. In bibendum lacus vitae felis egestas, at consectetur metus facilisis. Morbi tellus dolor, porta dignissim enim sit amet, dapibus sagittis erat. In blandit elit sit amet dui aliquet congue nec vel quam. Integer id tristique libero.</p>
              </div>

              <div class="blog-single-post-image">
                <div class="col-md-4 col-sm-4">
                  <img src="@/assets/images/blog-image1.jpg" class="img-responsive" alt="Blog Image 1">
                </div>
                <div class="col-md-4 col-sm-4">
                  <img src="@/assets/images/blog-image2.jpg" class="img-responsive" alt="Blog Image 2">
                </div>
                <div class="col-md-4 col-sm-4">
                  <img src="@/assets/images/blog-image3.jpg" class="img-responsive" alt="Blog Image 3">
                </div>
              </div>
              <p>Aliquam blandit velit nisi, sed fringilla felis lacinia sed. Integer vitae porta felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus non tristique lacus. Suspendisse ut tortor vitae risus lacinia tristique. Aliquam sed consectetur libero.</p>

              <div class="blog-author">
                <div class="media">
                  <div class="media-object pull-left">
                    <img src="@/assets/images/author-image1.jpg" class="img-circle img-responsive" alt="blog">
                  </div>
                  <div class="media-body">
                    <h3 class="media-heading">
                      <a href="#">Jen Lopez ( Designer )</a>
                    </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
                  </div>
                </div>
              </div>

              <div class="blog-comment">
                <h3>Comments</h3>
                <div class="media">
                  <div class="media-object pull-left">
                    <img src="@/assets/images/comment-image1.jpg" class="img-responsive img-circle" alt="Blog Image 11">
                  </div>
                  <div class="media-body">
                    <h3 class="media-heading">David Jones</h3>
                    <span>3 days ago</span>
                    <p>Aliquam gravida arcu at risus blandit, in interdum metus varius. Cras efficitur, ex sit amet tincidunt rhoncus, dui ex hendrerit risus, ac dapibus ligula mi id leo. In auctor dui justo, ac consequat dui posuere ac.</p>
                  </div>
                </div>
                <div class="media">
                  <div class="media-object pull-left">
                    <img src="@/assets/images/comment-image2.jpg" class="img-responsive img-circle" alt="Blog Image 22">
                  </div>
                  <div class="media-body">
                    <h3 class="media-heading">Omar Larus</h3>
                    <span>5 days ago</span>
                    <p>Maecenas ultricies ante dignissim, iaculis ligula sed, gravida ipsum. Pellentesque lobortis velit mi, sed volutpat enim facilisis.</p>
                  </div>
                </div>
                <div class="media">
                  <div class="media-object pull-left">
                    <img src="@/assets/images/author-image2.jpg" class="img-responsive img-circle" alt="Blog Image 33">
                  </div>
                  <div class="media-body">
                    <h3 class="media-heading">Walker Jen</h3>
                    <span>July 27, 2017</span>
                    <p>In eu posuere nulla, sit amet semper lectus. Aliquam gravida arcu at risus blandit, in interdum metus varius. Cras efficitur, ex sit amet tincidunt rhoncus, dui ex hendrerit risus, ac dapibus ligula mi id leo.</p>
                  </div>
                </div>
                <div class="media">
                  <div class="media-object pull-left">
                    <img src="@/assets/images/author-image1.jpg" class="img-responsive img-circle" alt="Blog Image 44">
                  </div>
                  <div class="media-body">
                    <h3 class="media-heading">Jen Lopez</h3>
                    <span>July 24, 2017</span>
                    <p>In auctor dui justo, ac consequat dui posuere ac. Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur.</p>
                  </div>
                </div>
              </div>

              <div class="blog-comment-form">
                <h3>Leave a Comment</h3>
                <form action="#" method="post">
                  <input type="text" class="form-control" placeholder="Name" name="name" required>
                  <input type="email" class="form-control" placeholder="Email" name="email" required>
                  <textarea name="message" rows="5" class="form-control" id="message" placeholder="Message" message="message" required="required"></textarea>
                  <div class="col-md-3 col-sm-4">
                    <input name="submit" type="submit" class="form-control" id="submit" value="Post Your Comment">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer Section -->

    <vFooter></vFooter>

    <!-- Back top -->
    <backtotop></backtotop>

  </div>
</template>

<script>
import vHeader from "../components/header";
import vFooter from "../components/footer";
import backtotop from "../components/BackToTop";

export default {
  name: "about",
  data() {
    return {};
  },
  components: { vHeader, vFooter, backtotop },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
